<template>
  <div class="col-xl-8 col-lg-9 relative-position bg-white shadow-light round-borders">
    <a-loading v-if="!querySet" :visible="loading" height="50vh"></a-loading>
    <div>
      <a-user-list v-if="querySet" :users="querySet" :size="32"></a-user-list>
      <a-loading v-if="querySet" :visible="loading" :center="false" class="q-my-xs"></a-loading>
      <a-pagination v-if="page > 1" :page="page" :max="max"></a-pagination>
    </div>
  </div>
</template>

<script>
  import { querySetMixin } from '../../mixins'

  export default {
    name: 'pageSearchMap',
    mixins: [querySetMixin],
    props: {
      keyword: {
        type: String,
        required: true
      }
    },
    data () {
      return {
        api: '/api/user/search_users/',
        limit: 20,
        infinite: true
      }
    },
    created () {
      this.$root.$emit('search', this.keyword)
    },
    computed: {
      queryParams () {
        return {
          username: this.keyword
        }
      }
    },
    watch: {
    },
    methods: {
    }
  }
</script>

<style lang="stylus">

</style>
